<template>
  <div class="person">
    <ul>
      <li v-for="item in list" :key="item.id">
        id：{{ item.id }}
        name: {{ item.name }}
        age:{{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { withDefaults } from 'vue'
import { type Persons } from '@/types'

//只接收
// defineProps(['PersonList'])

//接受list + 限制类型
// defineProps<{PersonList:Persons}>()

//接受list + 限制类型 + 限制必要性 + 指定默认值
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [
    { id: "12312321", name: "刘备", age: 10 },
    { id: "47839431", name: "关羽", age: 11 },
    { id: "31231441", name: "张飞", age: 20 }
  ]
})
</script>


<style lang="scss" scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  color: white;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>
